<template>
  <div class="payment-container">
    <el-card class="payment-card">
      <template #header>
        <div class="header-text">¥{{ $route.query.totalnumber }}.00</div>
      </template>
      <img src="@/assets/images/pay.png" style="width: 100%" />
      <div class="button-container">
        <el-button type="success" @click="go()">支付完成</el-button>
        <el-button type="info">重新支付</el-button>
      </div>
    </el-card>
  </div>
  <div class="recommendation">
    <img src="@/assets/images/image.png" class="recommendation-icon" />
    <el-text class="foot-text">微信支付</el-text>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'

//获取路由器对象
let $router = useRouter()
let $route = useRoute()
const go = () => {
  $router.push('/shangjia')
}
</script>

<style lang="scss">
.payment-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background-color: rgb(4, 135, 4);
  /* Adjust this if needed */
}

.recommendation {
  display: flex;
  align-items: center;
  color: white;
  font-size: 36px;
}

.recommendation-icon {
  width: 13%;
  /* Adjust as needed */
  margin-left: 34%;
  /* Adjust as needed */
}

.bold-text {
  font-size: 136px;
}

.payment-card {
  max-width: 480px;
}

.header-text {
  text-align: center;
  font-size: 30px;
}

.foot-text {
  font-size: 70px;
}

.button-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>
